---
pubDatetime: 2024-01-15 15:03:33
title: fantastic design
featured: false
draft: false
tags:
  - fantastic
description: "设计和交互在前端开发中都扮演着至关重要的角色，它们直接影响着用户体验和产品的成功"
---

## cool

### codepen 2023

- 神奇的悬浮特效

<p
  class="codepen"
  data-height="500"
  data-default-tab="result"
  data-slug-hash="YzJNbOa"
  data-preview="true"
  data-user="mubangadv"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 10.zembzev

<p
  class="codepen"
  data-height="500"
  data-default-tab="result"
  data-slug-hash="ZEmBzEv"
  data-preview="true"
  data-user="RAFA3L"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- wvxewXO

<p
  class="codepen"
  data-height="300"
  data-default-tab="result"
  data-slug-hash="wvxewXO"
  data-preview="true"
  data-user="gayane-gasparyan"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- theme button

<p
  class="codepen"
  data-height="300"
  data-default-tab="result"
  data-slug-hash="LYgjpYZ"
  data-preview="true"
  data-user="jh3y"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- QWzeQOK

<p
  class="codepen"
  data-height="300"
  data-default-tab="result"
  data-slug-hash="QWzeQOK"
  data-preview="true"
  data-user="ecemgo"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- [conic-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient)

<p
  class="codepen"
  data-height="300"
  data-default-tab="result"
  data-slug-hash="GRBeXLY"
  data-preview="true"
  data-user="avstorm"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- [mask](https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask)

<p
  class="codepen"
  data-height="300"
  data-default-tab="result"
  data-slug-hash="MWBjraa"
  data-preview="true"
  data-user="t_afif"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- qByGqOm

<p
  class="codepen"
  data-height="300"
  data-default-tab="result"
  data-slug-hash="qByGqOm"
  data-preview="true"
  data-user="thebabydino"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- scroll text

<p
  class="codepen"
  data-height="300"
  data-default-tab="result"
  data-slug-hash="eYbYydG"
  data-preview="true"
  data-user="jh3y"
  style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- ghost

<p
  class="codepen"
  data-height="300"
  data-default-tab="result"
  data-slug-hash="yLGxEKb"
  data-preview="true"
  data-user="ksenia-k"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- puppy

<p
  class="codepen"
  data-height="300"
  data-default-tab="result"
  data-slug-hash="MWBGbOb"
  data-preview="true"
  data-user="Ma5a"
></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
